<template>
	<div
		class="files-upload"
		v-loading="loading"
	>
		<Breadcrumb
			:url="url"
			@startUpload="showUploadModel=true"
			@createFolder="showFolderMode=true"
			@urlChange="urlChange"
		/>
		<FolderModel
			v-if="showFolderMode"
			:url="url"
			@close="showFolderMode=false"
			@createFinish="showFolderMode=false;getList()"
		/>
		<UploadModel
			v-if="showUploadModel"
			:url="url"
			@close="showUploadModel=false"
			@uploadFinish="getList"
		/>
		<FileList
			ref="fileList"
			:files="fileList"
			:url="url"
			@onclickFolder="urlChange"
			@refresh="getList"
		/>
	</div>
</template>

<script>
import { getFileList } from '@exploit/utils/file'
import Breadcrumb from './components/Breadcrumb'
import FolderModel from './components/FolderModel'
import UploadModel from './components/UploadModel'
import FileList from './components/FileList'

export default {
  route: {
    meta: {
      login: true,
      showLeft: true,
      activeName: 'FilesUpload',
    }
  },
  components: {
    Breadcrumb,
    FolderModel,
    UploadModel,
    FileList,
  },
  data() {
    return {
      loading: false,
      url: '/', // 一定要以/结尾
      showFolderMode: false, // 创建文件夹弹窗
      showUploadModel: false, // 展示上传弹窗
      fileList: [],
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    /**
     * 获取文件列表
     */
    async getList() {
      try {
        this.loading = true
        this.$refs.fileList.pageNum = 1
        this.fileList = await getFileList(this.url)
        this.fileList.reverse()
        console.log(this.fileList)
      } catch (err) {
        console.log(err)
      }
      this.loading = false
    },
    /**
     * 路径改变，改变根路径重新获取
     * @param {String} key
     */
    urlChange(key) {
      this.url = key
      this.getList()
    }
  }
}
</script>

<style lang="scss" scoped>
.files-upload {
  min-height: 100vh;
  padding: 20px;
}
</style>
